<template>
  <section>
    <NewsCarousel />
    <div class="my-container mt-10">
      <h3 class="border-l-4 border-l-primary mb-7 pl-5 text-3xl">全部资讯</h3>
      <el-row :gutter="24">
        <!-- @click.native="$router.push(`/detail/${car._id}`)" -->
        <el-col :xs="24" :sm="12" :md="12" :lg="8" v-for="news in newsList" :key="news._id">
          <el-card
            class="flex flex-col justify-between my-2 cursor-pointer hover:-translate-y-1"
            shadow="hover"
            @click.native="goDetail(news)"
          >
            <el-image fill="cover" class="w-[369px] h-[208px]" :src="news.img" />
            <p class="my-3">{{ news.title }}</p>
            <p class="text-sm text-gray-400"> {{ format(news.createdAt, 'yyyy-MM-dd HH:mm:ss') }} </p>
          </el-card>
        </el-col>
      </el-row>

      <template>
        <el-pagination
          class="flex justify-center my-3"
          :hide-on-single-page="true"
          background
          layout="prev, pager, next"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          @current-change="handleCurrentPage"
        />
      </template>
    </div>
  </section>
</template>

<script>
  import { format } from 'date-fns'

  export default {
    name: 'News',
    data() {
      return {
        format,
        newsList: [],
        currentPage: 1,
        pageSize: 9,
        total: 0,
      }
    },
    computed: {
      offset() {
        return (this.currentPage - 1) * this.pageSize
      },
    },
    mounted() {
      this.getNews()
    },
    methods: {
      goDetail(news) {
        this.$store.commit('news/STORAGENEWS', news)
        this.$router.push('/news-detail/' + news._id)
      },
      // 页面改变
      handleCurrentPage(page) {
        this.currentPage = page
        this.getNews()
      },
      // 获取所资讯
      async getNews() {
        let ret = await reqNews({
          offset: this.offset,
          limit: this.pageSize,
        })
        if (ret.code == 200) {
          this.newsList = ret.data.newsList
          this.total = ret.data.total
        }
      },
    },
  }
</script>

<style></style>
